<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Transition.css Kitchen Sink</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link rel='stylesheet' href='https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css'>-->
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<article>
    <div class="demo" transition-style="out:circle:bottom-left" style="--hue:275; --transition__delay: 0s;">
        <h1>1</h1>
    </div>
    <div class="demo" transition-style="out:wipe:up" style="--hue:276; --transition__delay: 0.1s;">
        <h1>2</h1>
    </div>
    <div class="demo" transition-style="out:wipe:down" style="--hue:277; --transition__delay: 0.2s;">
        <h1>3</h1>
    </div>
    <div class="demo" transition-style="out:circle:bottom-right" style="--hue:278; --transition__delay: 0.3s;">
        <h1>4</h1>
    </div>
    <div class="demo" transition-style="out:square:bottom-right" style="--hue:279; --transition__delay: 0.4s;">
        <h1>5</h1>
    </div>
    <div class="demo" transition-style="out:wipe:bottom-left" style="--hue:280; --transition__delay: 0.5s;">
        <h1>6</h1>
    </div>
    <div class="demo" transition-style="out:polygon:opposing-corners" style="--hue:281; --transition__delay: 0.6s;">
        <h1>7</h1>
    </div>
    <div class="demo" transition-style="out:polygon:opposing-corners" style="--hue:282; --transition__delay: 0.7s;">
        <h1>8</h1>
    </div>
    <div class="demo" transition-style="out:circle:bottom-right" style="--hue:283; --transition__delay: 0.8s;">
        <h1>9</h1>
    </div>
    <div class="demo" transition-style="out:square:top-right" style="--hue:284; --transition__delay: 0.9s;">
        <h1>10</h1>
    </div>
    <div class="demo" transition-style="out:wipe:left" style="--hue:285; --transition__delay: 1s;">
        <h1>11</h1>
    </div>
    <div class="demo" transition-style="out:square:top-left" style="--hue:286; --transition__delay: 1.1s;">
        <h1>12</h1>
    </div>
    <div class="demo" transition-style="out:square:center" style="--hue:287; --transition__delay: 1.2s;">
        <h1>13</h1>
    </div>
    <div class="demo" transition-style="out:square:hesitate" style="--hue:288; --transition__delay: 1.3s;">
        <h1>14</h1>
    </div>
    <div class="demo" transition-style="out:diamond:hesitate" style="--hue:289; --transition__delay: 1.4s;">
        <h1>15</h1>
    </div>
    <div class="demo" transition-style="out:circle:top-left" style="--hue:290; --transition__delay: 1.5s;">
        <h1>16</h1>
    </div>
    <div class="demo" transition-style="out:wipe:up" style="--hue:291; --transition__delay: 1.6s;">
        <h1>17</h1>
    </div>
    <div class="demo" transition-style="out:square:top-right" style="--hue:292; --transition__delay: 1.7s;">
        <h1>18</h1>
    </div>
    <div class="demo" transition-style="out:circle:top-right" style="--hue:293; --transition__delay: 1.8s;">
        <h1>19</h1>
    </div>
    <div class="demo" transition-style="out:wipe:bottom-right" style="--hue:294; --transition__delay: 1.9s;">
        <h1>20</h1>
    </div>
    <div class="demo" transition-style="out:circle:hesitate" style="--hue:295; --transition__delay: 2s;">
        <h1>21</h1>
    </div>
    <div class="demo" transition-style="out:diamond:center" style="--hue:296; --transition__delay: 2.1s;">
        <h1>22</h1>
    </div>
    <div class="demo" transition-style="out:polygon:opposing-corners" style="--hue:297; --transition__delay: 2.2s;">
        <h1>23</h1>
    </div>
    <div class="demo" transition-style="out:wipe:top-right" style="--hue:298; --transition__delay: 2.3s;">
        <h1>24</h1>
    </div>
    <div class="demo" transition-style="out:circle:bottom-left" style="--hue:299; --transition__delay: 2.4s;">
        <h1>25</h1>
    </div>
    <div class="demo" transition-style="out:circle:center" style="--hue:300; --transition__delay: 2.5s;">
        <h1>26</h1>
    </div>
    <div class="demo" transition-style="out:square:hesitate" style="--hue:301; --transition__delay: 2.6s;">
        <h1>27</h1>
    </div>
    <div class="demo" transition-style="out:circle:hesitate" style="--hue:302; --transition__delay: 2.7s;">
        <h1>28</h1>
    </div>
    <div class="demo" transition-style="out:square:center" style="--hue:303; --transition__delay: 2.8s;">
        <h1>29</h1>
    </div>
    <div class="demo" transition-style="out:wipe:down" style="--hue:304; --transition__delay: 2.9s;">
        <h1>30</h1>
    </div>
    <div class="demo" transition-style="out:wipe:right" style="--hue:305; --transition__delay: 3s;">
        <h1>31</h1>
    </div>
    <div class="demo" transition-style="out:wipe:top-left" style="--hue:306; --transition__delay: 3.1s;">
        <h1>32</h1>
    </div>
    <div class="demo" transition-style="out:square:bottom-left" style="--hue:307; --transition__delay: 3.2s;">
        <h1>33</h1>
    </div>
</article>
<footer><a href="http://transition.style">transition.style</a>
    <input type="checkbox" id="stop"/>
</footer>
<script type="module" src="./script.js"></script>

</body>

</html>
